<template>
	<view class="page_box">
		<u-navbar :is-back="true" title="一键报修" v-if="1" :border-bottom="false"></u-navbar>

		<view class="content_box ">
			<view class="content-item content-border">
				<view class="f30">自修教程</view>
				<view class="selfstudyCrse flex justify-between flex-wrap">
					<view class="item flex flex-direction justify-center align-center">
						<image src="https://sprtcar.oss-cn-chengdu.aliyuncs.com/home/ico_kgcz.png" class="img"></image>
						<view class="text">开关插座</view>
					</view>
					<view class="item flex flex-direction justify-center align-center">
						<image src="https://sprtcar.oss-cn-chengdu.aliyuncs.com/home/ico_slt.png" class="img"></image>
						<view class="text">水龙头</view>
					</view>
					<view class="item flex flex-direction justify-center align-center">
						<image src="https://sprtcar.oss-cn-chengdu.aliyuncs.com/home/ico_mc.png" class="img"></image>
						<view class="text">门窗</view>
					</view>
					<view class="item flex flex-direction justify-center align-center">
						<image src="https://sprtcar.oss-cn-chengdu.aliyuncs.com/home/ico_cmhy.png" class="img"></image>
						<view class="text">橱门合页</view>
					</view>
					<view class="item flex flex-direction justify-center align-center">
						<image src="https://sprtcar.oss-cn-chengdu.aliyuncs.com/home/ico_dbby.png" class="img"></image>
						<view class="text">地板保养</view>
					</view>
					<view class="item flex flex-direction justify-center align-center">
						<image src="https://sprtcar.oss-cn-chengdu.aliyuncs.com/home/ico_jjby.png" class="img"></image>
						<view class="text">家具保养</view>
					</view>
				</view>
			</view>
			<view class="content-item">
				<view class="title f-30 flex justify-between align-center padding-bottom padding-top-sm">
					<text class="f-30">我要报修</text>
					<view class="flex align-center" @click="warrantyRec">
						<text class="f26" style="color: #999999;">我的报修记录</text>
						<u-icon size="22" name="arrow-right" color="#999999" style="margin-left: 8rpx;"></u-icon>
					</view>
				</view>
				<u-form :model="form" ref="uForm" class="uform">
					<u-form-item :border-bottom="border_bottom">
						<u-input 
						v-model="form.content"
						type="textarea" 
						placeholder="请简单描述遇到的问题..."
						placeholder-style="colo:#B4B4B4;font-size: 26rpx;"
						maxlength="500"
						height="320"
						:clearable="clearable"
						></u-input>
					</u-form-item>
					<u-form-item :border-bottom="border_bottom">
						 <u-upload
						 	width="156"
						 	height="156"
						 	max-count="10"
						 	ref="uUpload"
						 	action="#"
						 	:auto-upload="auto_upload"
						 	upload-text=" "
						  ></u-upload>
					</u-form-item>
					<u-form-item :border-bottom="border_bottom">
						<button class="circle-btn" @click="submit()">确定</button>
					</u-form-item>
				</u-form>
			</view>


		</view>

		<yy-login v-if="vuex_login"></yy-login>
		<yy-loading text="加载中.." mask="true" click="true" ref="loading"></yy-loading>
		<u-toast ref="uToast" />
	
	</view>
</template>

<script>
export default {
	data() {
		return {
			form:{
				content:"",
				image:"",
			},
			clearable:false,
			auto_upload:false,
			border_bottom:false
		};
	},
	onShow() {
		
	},
	onLoad(e) {},
	methods: {
		warrantyRec(){
			uni.navigateTo({
				url:'./warrantyRec'
			})
		},
		submit() {
			let files = []
			files = this.$refs.uUpload.lists;
			console.log(this.form)
			if(this.form.content){
				uni.showToast({
					title:'保修成功',
					icon:"none"
				})
			}else{
				uni.showToast({
					title:'请填写并上传保修信息',
					icon:"none"
				})
			}
		},
	}
};
</script>

<style lang="scss" scoped>
.page_box {

}

.content_box {
	.selfstudyCrse{
		margin-top: 40rpx;
		.item{
			width: 26%;
			margin-bottom: 36rpx;
			.img{
				width: 140rpx;
				height: 140rpx;
			}
			.text{
				font-size: 26rpx;
				margin-top: 8rpx;
			}
		}
	}
	.uform{
		margin-top: 20rpx;
		/deep/.u-input__textarea{
			background-color: #F7F7F7;
			border-radius: 20rpx;
			padding: 40rpx 20rpx;
		}
		.circle-btn{
			background: #4a515b !important;
			color: #FFFFFF;
			border-radius: 45rpx;
			font-size: 30rpx;
			font-weight: 500;
			line-height: 90rpx;
			margin-top: 140rpx;
		}
	}
}
</style>
